import React, {PureComponent} from 'react';
import {Button, Card, Col, Form, Input, Modal, Row, Tree,} from 'antd';
import TableList from '@/components/TableList';
import styles from '@/pages/search.less';

const FormItem = Form.Item;
const {TextArea} = Input;
const {DirectoryTree, TreeNode} = Tree;

// 申请详情页面，包含审核
@Form.create()
class ChoosePerson extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      selectedRows: [],
      orgId: '',//树节点ID
      selectedRowKeys: [], // 勾选几项，下次默认进来勾选
    };
  }

  okHandle = () => {
    const {form, handleBindUserVisible} = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      const {selectedRows} = this.state;
      handleBindUserVisible(false, selectedRows);
    });
  };

  handleUserList = (pagination) => {
    const {orgId} = this.state;
    const {text} = this.props;
    const id = text && text.id || '';
    this.props.getList({orgId, id}, pagination.pageSize, pagination.current - 1);
  }

  onSelect = (info) => {
    const {text, form,} = this.props;
    const orgId = info[0];
    if (!orgId) {
      return;
    }
    form.resetFields();

    const id = text && text.id || '';
    this.props.getList({orgId, id});
    this.setState({
      orgId,
      selectedRows: []
    })
  }

  handleSearch = e => {
    e.preventDefault();
    const {getList, form, text,} = this.props;
    const id = text && text.id || '';
    const {orgId} = this.state;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      this.setState({
        formValues: fieldsValue,
      })
      fieldsValue.orgId = orgId;
      fieldsValue.id = id;
      //点击查询
      getList(fieldsValue);
      this.resetSelectedRows();
    });
  };
  resetSelectedRows = () => {
    this.setState({
      selectedRows: [],
    });
  }
  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const {getList} = this.props;
    const {formValues} = this.state;

    const filters = Object.keys(filtersArg).reduce((obj, key) => {
      const newObj = {...obj};
      newObj[key] = getValue(filtersArg[key]);
      return newObj;
    }, {});
    const {orgId} = this.state;
    const params = {
      pageNum: pagination.current - 1,
      pageSize: pagination.pageSize,
      ...formValues,
      ...filters,
      orgId: orgId,
    };
    if (sorter.field) {
      params.sorter = `${sorter.field}_${sorter.order}`;
    }
    getList(params);
    this.resetSelectedRows();
  };


  handleSelectRowsNew = (selectedRows) => {
    this.setState({
      selectedRows: selectedRows,
    });
  };

  renderForm() {
    const {
      form: {getFieldDecorator},
    } = this.props;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{md: 8, lg: 24, xl: 48}}>
          <Col md={8} sm={24}>
            <FormItem label="姓名">
              {getFieldDecorator('userName')(<Input placeholder="请输入"/>)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="登录名">
              {getFieldDecorator('userCode')(<Input placeholder="请输入"/>)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
            </span>
          </Col>
        </Row>

      </Form>
    );
  }


  render() {
    const {bindUserVisible, handleBindUserVisible, treeDataList, personData} = this.props;
    const {selectedRows, selectedRowKeys} = this.state;
    const columns = [
      {
        title: '姓名',
        dataIndex: 'userName',

      },
      {
        title: '登录名',
        dataIndex: 'userCode',

      },
      {
        title: '所属组织',
        dataIndex: 'orgName',
      }
    ];
    //当前页面状态
    const loop = data => data.map((item) => {
      if (item.children) {
        return (
          <TreeNode key={item.id} title={item.orgName} {...item}>
            {loop(item.children || [])}
          </TreeNode>
        );
      }
      return <TreeNode key={item.id} title={item.orgName} {...item}/>;
    });
    return (
      <Modal
        destroyOnClose
        width={800}
        title="人员选择"
        visible={bindUserVisible}
        onOk={this.okHandle}
        onCancel={() => handleBindUserVisible()}
        bodyStyle={{padding: '0'}}
      >
        <Row gutter={8}>
          <Col lg={7} md={24}>
            <Card bordered={false} style={{color: 'red'}}>
              <div className={styles.modalTreeScroll}>
                <Tree
                  showLine={true}
                  onSelect={this.onSelect}
                  defaultExpandedKeys={['1']}
                >

                  {loop(treeDataList || [])}

                </Tree>
              </div>
            </Card>
          </Col>
          <Col lg={17} md={24}>
            <Card bordered={false}>
              <div className={styles.tableListForm}>{this.renderForm()}</div>
              <TableList
                className={styles.tdPadding}
                selectedRows={selectedRows}
                loading={false}
                data={personData}
                columns={columns}

                onSelectRow={this.handleSelectRowsNew}
                onChange={this.handleUserList}
                rowKey={record => record.userId}
              />
            </Card>
          </Col>
        </Row>
      </Modal>
    );
  }
}

export default ChoosePerson;
